<template>
	<BaseChart :options="options" class="sk-node" />
</template>

<script lang="ts" setup>
import { BaseChart } from "../../shared";
import type { ECOption } from "@/plugins/echarts";

const options: ECOption = {
	title: {
		top: "middle",
		left: "center",
		textStyle: { fontSize: "16px", color: "#fbf9f9" }
	},
	series: [
		{
			type: "liquidFill",
			radius: "98%",
			color: ["#4fef65", "#3a9df3"],
			show: false,
			data: [0.68, 0.58],
			outline: {
				borderDistance: 0,
				itemStyle: {
					borderWidth: 1,
					borderColor: "#2693fc"
				}
			},
			itemStyle: {
				shadowBlur: 0
			},
			backgroundStyle: {
				color: "#c5dff3",
				opacity: 0.6
			},
			label: { fontSize: 0 }
		} as any
	],
	tooltip: { show: false }
};
</script>

<style lang="scss" scoped>
.sk-node {
	border-radius: 50%;
}
</style>
